<template>
  <div>
    <el-card class="tree-card">
      <!-- 用了一个行列布局显示顶部公司 -->
      <!-- 父组件对子组件传参 -->
      <tree-tools :node-data="company" :is-company="true" @addDepts="eddDepts" />
      <hr>
      <el-tree
        :data="departs"
        :default-expand-all="true"
        :expand-on-click-node="false"
      >
        <!-- 自定义显示的内容， 里面定义每个节点的显示， 外层 el-tree 进行数组遍历， 每个节点都用这个模板喧染一次 -->
        <template v-slot="scoped">
          <!-- 父组件对子组件进行传参 -->
          <tree-tools
            :node-data="scoped.data"
            :is-company="false"
            @addDepts="eddDepts"
            @reload="getDepartments"
            @showEditDialog="showEditDialog"
          />
        </template>
      </el-tree>
    </el-card>
    <!-- 父传子 -->
    <AddDepts
      ref="addDepts"
      :is-show-dialog="isShowDialog"
      :node-data="nodeData"
      @reload="getDepartments"
      @closeDialog="isShowDialog=false"
    />
    <!-- data遍历数组 -->
    <!-- default-expand-all默认展开 -->

    <!-- 默认显示 label 作为节点, children 作为子节点数组 -->
    <!-- <el-tree :data="treeData"> -->

    <!-- 如果后端提供的数据不叫label和 children 可以通过 props 对象指定 -->
    <!-- <el-tree :data="treeData" default-expand-all :props="{label: 'title'}"> -->

    <!-- 如果都还不满意, 还可以用作用域插槽自定义, 这个组件会返回 scope.data 作为当前节点变量供使用 -->
    <!-- props为第二种写法 -->
    <!-- <el-tree :data="treeData" justify="space-between" align="middle" style="width: 800px, height: 200px">
      <template v-slot="scope">
        <div>
          部门名称: {{ scope.data.title }}
        </div>
      </template>
    </el-tree> -->
  </div>
</template>

<script>
// 引入 api/departments
import { getDepartments } from '@/api/departments'
// 引入子组件
import TreeTools from '@/views/departments/components/tree-tools.vue'
// 引入封装好的树形筛选
import { listToTreeData } from '@/utils/index'
// 引入弹窗
import AddDepts from './components/add-depats.vue'
export default {
  // 注册子组件
  components: {
    TreeTools,
    AddDepts
  },
  data() {
    return {
      // 要求公司也得有 nodeData 对象
      // companyInfo: {
      //   name: '江苏传智播客教育科技股份有限公司',
      //   manager: '负责人'
      // },

      // 衍射树形部门数据
      // depts: [
      //   // 数组每个对象都是一个节点
      //   // element ui 要求树形 label 属性 来指定当前节点名称
      //   // children 属性来指定子节点数组， 每层子节点数组结构相似
      //   // 如果后端来的数据字段不一样， 就要再 el-tree 属性添加 props 来定义对应字段名    :props="{label: name}"
      //   {
      //     name: '总裁办',
      //     manager: '小王'
      //   },
      //   {
      //     name: '人事部',
      //     manager: '小王'
      //   },
      //   {
      //     name: '财务部',
      //     children: [
      //       {
      //         name: '会计'
      //       },
      //       {
      //         name: '出纳'
      //       }
      //     ]
      //   },
      //   {
      //     name: '技术部',
      //     children: [
      //       {
      //         name: '前端'
      //       },
      //       {
      //         name: '后端',
      //         manager: '小王'
      //       }
      //     ]
      //   }
      // ]
      company: {},
      departs: [],
      // 窗体组件的弹窗
      isShowDialog: false,
      // 临时储存
      nodeData: {}
    }
  },
  computed: {
  },
  created() {
    this.getDepartments() // 调用自身的方法
  },
  methods: {
    async getDepartments() {
      const result = await getDepartments()
      this.company = { name: result.companyName, manager: '负责人' }
      // 拿到的数据是以 pid 的形式进行处理, 树形
      // 所以要改造数据
      // 空字符串是后端约定的顶级部门 pid
      // 第一层筛选的都是 pid === ''
      this.departs = listToTreeData(result.depts, '')
    },
    // 子组件弹窗
    eddDepts(nodeData) {
      this.isShowDialog = true
      // 树形组件， 被点击时，被点击的对象往外传
      // 父组件暂存传给弹窗
      this.nodeData = nodeData
    },

    // 获取部门详情
    showEditDialog(nodeData) {
      // 记得在弹窗时获取旧数据
      // 显示编辑弹窗
      // 这个地方要触发弹窗的数据回显
      // 填充逻辑写在弹窗组件, 在这里进行调用
      // 注意因为点击的数据不一定完整, 索要要发请求获取最新详情
      // 如何调用子组件的函数呢? 先用 ref 取得子组件实例, 就可以直接链式调用执行
      // this.nodeData = nodeData
      this.$refs.addDepts.getDepartDetailFunction(nodeData.id)
      this.isShowDialog = true
    }

    // listToTreeData(depts, id) {
    //   // depts 是完整的部门列表， id是指当前需要查找的下属的id判断标准
    //   // 基本逻辑是，根据列表和部门id查找的当前部门下属
    //   const arr = []
    //   depts.forEach(element => {
    //     if (element.pid === id) {
    //       arr.push(element)
    //       // 递归部分 ，找到一个下属， 继续用下属 id 再去找下一层， 放在下属的 chilldren 当中
    //       element.children = this.listToTreeData(depts, element.id)
    //     }
    //   })
    //   return arr
    // }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
